<template>
	<view :class="['cu-modal',{show:store.state.cart.popShow}]">
		<view class="bg-white modal-cont" v-if="popData">
				<view class="flex padding">
					<view class="flex align-center">
						<image class="poster margin-right" :src="popData.img" mode=""></image>
					</view>
					<view class="flex justify-between info list">
						<view class="">
							{{popData.name}}
							<view class="margin-tb-xs">{{popData.french}}</view>
							￥{{popData.list[dropIdx].price}}
						</view>
					</view>
				</view>
				<view class="flex justify-between padding u-border-top">
					<view class="">
						规格选择
					</view>
					<view class="drop-cont" @click="dropShow=true">
						<view class="padding-lr">
							{{popData.list[dropIdx].spec}}
							({{popData.list[dropIdx].weight}})
							-
							{{popData.list[dropIdx].fittings}}
						</view>
						<view class="drop-list" v-if="dropShow">
							<view 
								class="padding" 
								v-for="(item,index) in popData.list" 
								@click.stop="handleDropList(index)"
							>
								{{item.spec}}
								({{item.weight}})
								-
								{{item.fittings}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between padding u-border-top align-center">
					<view class="">
						数量选择
					</view>
					<uni-number-box :min="1" v-model="gnum"></uni-number-box>
				</view>
				<view class="flex btn-cont text-center">
					<view class="padding bg-yellow" @click="handlePopShow">
						取消
					</view>
					<view class="padding bg-brown" @click="handleAdd">
						确定
					</view>
				</view>
			</view>
		
	</view>
</template>

<script setup>
import { computed, onMounted, onUpdated, ref } from "vue";
import {useStore} from 'vuex'
const store = useStore()
const handlePopShow = ()=>{
	store.commit('cart/popShowMut',false)
}
const popData = computed(()=>{
	return store.state.cart.popData
})
const dropShow = ref(false) //下拉规格列表显示控制
const dropIdx = ref(0)  //用户点选的规格
const gnum = ref(1)  //商品数量
const handleDropList = (idx)=>{
	dropShow.value = false
	dropIdx.value = idx
}

//确认
const handleAdd = ()=>{
	console.log(gnum.value);
	handlePopShow()
	store.commit('cart/cartAddMut',{
		...popData.value,
		dropIdx:dropIdx.value,
		gnum:gnum.value,
		isCheck:true
	})
}

// 为编辑弹窗初始化数量
onUpdated(()=>{
	// console.log('pop更新了');
	dropShow.value = false
	if(popData.value.gnum){ //编辑
		gnum.value = popData.value.gnum
		dropIdx.value = popData.value.dropIdx
	}else{ //新增
		gnum.value = 1
		dropIdx.value = 0
	}
})
</script>

<style lang="scss">
.cu-modal{
	text-align: left;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.modal-cont{
	position: absolute;
	top: 50%;
	left: 5%;
	width: 90%;
	transform: translateY(-50%);
}
.btn-cont view{
	width: 50%;
}
.drop-cont{
	position: relative;
	.drop-list{
		position: absolute;
		right: 0;
		top: 50upx;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		background-color: #fff;
		z-index: 3;
		font-size: 12upx;
	}
}
</style>